<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import { useId } from 'element-plus';

// 查询
const itemsPerPage = ref(100);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '防守企业', key: 'companyName', sortable: false},
    {title: '企业类型', key: 'companyType', sortable: false},
    {title: '创建时间', key: 'createTime', sortable: false},
    // {title: '操作', key: 'actions', sortable: false}
];
const headers2 = [
    {title: '序号', key: 'num', sortable: false},
    {title: '防守企业', key: 'companyName', sortable: false},
    {title: '企业类型', key: 'companyType', sortable: false},
    {title: '创建时间', key: 'createTime', sortable: false},
    // {title: '操作', key: 'actions', sortable: false}
];
const companyList = ref([
    {value:'48',title:'党委机关'},
    {value:'50',title:'事业单位'},
    {value:'51',title:'电子政务'},
    {value:'52',title:'政府机关'},
    {value:'53',title:'大型国企'},
    {value:'54',title:'其他单位'}
]);
const items = ref([]);
const items2 = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const totalItems2 = ref(0);
const userInfo = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")));

const search = ref('');
const name = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")).activityId);
const code = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")).attackId);
const activityList = ref([]);
const attackList = ref([]);
const basCompanyAttack = ref({});
watch(name, () => {
    // search.value = name.value
    loadItems()
})
watch(code, () => {
    // search.value = code.value
    loadItems()
})

function loadItems() {
    loading.value = true;
    axios.post('/companyAttack/findAttackDefenceInfo', {
        activityId: name.value,
        id: code.value
    }).then(res => {
        if(res.code == 200) {
            basCompanyAttack.value = res.data.basCompanyAttack
            items.value = res.data.privateDefendInfo
            items2.value = res.data.publicDefendInfo
            totalItems.value = res.data.privateDefendInfo.length;
            totalItems2.value = res.data.publicDefendInfo.length;
            loading.value = false;            
        } else {
            
        }
    }, err => {
        items.value = []
        items2.value = []
        totalItems.value = 0
        totalItems2.value = 0
        loading.value = false
    })
}

onMounted(() => {
    axios.post("/activity/select", {pageNo:1,pageSize: 1000}).then(res => {
        activityList.value = res.data.records;
        axios.post("/companyAttack/select", {pageNo:1,pageSize: 1000}).then(res => {
            attackList.value = res.data.records;
            if(userInfo.value.userType == 1) {
                name.value = activityList.value[0].id
                code.value = attackList.value[0].id
            }
            loadItems()
        })        
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    companyName: "",
    companyType: "",
    bLon: "",
    bLat: ""
});

function resetEditedItem() {
    editedItem.value = {
        companyName: "",
        companyType: "",
        bLon: "",
        bLat: ""
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.status += ""
    editedItem.value.companyType += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/companyDefend/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/companyDefend/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    axios.post('/basJudge/delBasJudge?userId=' + beDeleteItem.value.id).then(() => {
        snackbar.info("删除成功")
        loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = null
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>对战表</v-toolbar-title>
        <v-select :items="activityList" v-model="name" item-title="name" item-value="id" hide-details label="参加活动" :readonly="userInfo.userType != 1"></v-select>
        <v-select :items="attackList" v-model="code" item-title="companyName" item-value="id" hide-details label="攻方企业" :readonly="userInfo.userType == 3"></v-select>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <!-- <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template> -->
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.companyName" label="企业名称" required></v-text-field>
                    <v-select
                    :items=companyList
                    v-model="editedItem.companyType"
                    label="企业类型"
                    required></v-select>
                    <!-- <v-text-field v-model="editedItem.bLon" label="经度" required></v-text-field>
                    <v-text-field v-model="editedItem.bLat" label="纬度" required></v-text-field> -->
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
    <v-row>
        <v-col col="12" md="6">
            <v-card>
                <v-card-title>私有企业对战表</v-card-title>
                <v-data-table-server :search="search" :items-per-page="totalItems" :headers="headers" :items-length="totalItems"
                :items="items"
                :loading="loading"
                class="elevation-1"
                items-per-page-text="每页数量"
                >
                    <template v-slot:item.num="{ index }">
                        <span>{{ index + 1 }}</span>
                    </template>
                    <template v-slot:item.companyType="{ item }">
                        <span v-for="k in companyList" v-show="k.value == item.companyType">
                            {{ k.title }}
                        </span>
                    </template>
                    <template v-slot:item.status="{ item }">
                        <v-chip v-if="item.status == 0" color="green">
                            正常
                        </v-chip>
                        <v-chip v-if="item.status == 1" color="red">
                            停用
                        </v-chip>
                    </template>
                    <template v-slot:item.actions="{ item }">
                        <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item)"></v-btn>
                    </template>
                </v-data-table-server>                  
            </v-card>
        </v-col>
        <v-col col="12" md="6">
            <v-card>
                <v-card-title>公有企业对战表</v-card-title>
                <v-data-table-server :search="search" :items-per-page="totalItems2" :headers="headers2" :items-length="totalItems2"
                :items="items2"
                :loading="loading"
                class="elevation-1"
                items-per-page-text="每页数量">
                    <template v-slot:item.num="{ index }">
                        <span>{{ index + 1 }}</span>
                    </template>
                    <template v-slot:item.companyType="{ item }">
                        <span v-for="k in companyList" v-show="k.value == item.companyType">
                            {{ k.title }}
                        </span>
                    </template>
                    <template v-slot:item.status="{ item }">
                        <v-chip v-if="item.status == 0" color="green">
                            正常
                        </v-chip>
                        <v-chip v-if="item.status == 1" color="red">
                            停用
                        </v-chip>
                    </template>
                    <template v-slot:item.actions="{ item }">
                        <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item)"></v-btn>
                    </template>
                </v-data-table-server>                 
            </v-card>
        </v-col>
    </v-row>
</template>

<style scoped lang="less">

</style>
